<template>
    <div>
        <!-- 表格工作时天天写，不厌其烦的写。 -->
        <!-- 现在真的每天都练练！Vue熟了，走遍天下都有饭吃。 -->
        <el-form ref="myform" :model="myform" label-width="150px" :rules="rules">
            <el-form-item label="省市县镇" prop="pcas">
                <!-- 这是我们自己封装的省市县镇组件 -->
                <PCASChooser 
                    @done="pcasDone($event)" 
                    :defaultP="myform.p" 
                    :defaultC="myform.c" 
                    :defaultA="myform.a" 
                    :defaultS="myform.s"
                ></PCASChooser>
            </el-form-item>
            <el-form-item label="街道、小区、门牌号" prop="d">
                <el-input v-model="myform.d"></el-input>
            </el-form-item>
            <el-form-item label="收件人姓名" prop="n">
                <el-input v-model="myform.n"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="tel">
                <el-input v-model="myform.tel"></el-input>
            </el-form-item>
            <el-form-item label="别名" prop="alias">
                <div style="float: left;">
                    <el-radio-group v-model="myform.alias">
                        <el-radio label="家"></el-radio>
                        <el-radio label="公司"></el-radio>
                        <el-radio label="父母家"></el-radio>
                        <el-radio label="其他"></el-radio>
                    </el-radio-group>
                </div>
                <div style="float: left; margin-left: 10px;">
                    <el-input></el-input>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    // 迎接父组件给我的数据，defaultData是回显数据用的，dialogType是告诉我当前干嘛的（增加或者删除）。
    props: ['defaultData', 'dialogType'],
    data() {
        return {
            // 表单的数据
            myform: {
                d: this.dialogType == '修改' ? this.defaultData.d : '',
                n: this.dialogType == '修改' ? this.defaultData.n : '',
                tel: this.dialogType == '修改' ? this.defaultData.tel : '',
                alias: this.dialogType == '修改' ? this.defaultData.alias : '家',
                // 这个值没用，就是为了自带的小星星验证能通过
                pcas: '这是一个固定值，为了自带的小星星验证能通过',
                // 有用的:
                p: this.dialogType == '修改' ? this.defaultData.p : '',
                c: this.dialogType == '修改' ? this.defaultData.c : '',
                a: this.dialogType == '修改' ? this.defaultData.a : '',
                s: this.dialogType == '修改' ? this.defaultData.s : ''
            },
            rules: {
                // 校验规则
                pcas: [
                    {
                        // 自定义校验函数，每当表单被校验时，或者trigger时，都会触发
                        validator: (value, rules, callback) => {
                            if (
                                this.myform.p != '' &&
                                this.myform.c != '' &&
                                this.myform.a != '' &&
                                this.myform.s != ''
                            ) {
                                // callback中如果没有参数，表示通过验证
                                callback();
                            } else {
                                // callback中如果有字符串，表示没有通过验证，字符串是给用户的提示
                                callback('必须选择省市县镇')
                            }
                        }
                    },
                    // 自带小星星
                    { required: true },
                ],
                // 街道、小区、门牌号
                d: [
                    { required: true, message: "必须填写街道、小区、门牌号" },
                ],
                n: [{ required: true, message: "必须填写收件人姓名", trigger: "blur" }],
                tel: [{ required: true, message: "必须填写电话", trigger: "blur" }],
                alias: [{ required: true, message: "必须选择别名", trigger: "blur" }],
            },
        };
    },
    methods: {
        // 选择完省市县镇了
        pcasDone({ p, c, a, s }) {
            this.myform.p = p;
            this.myform.c = c;
            this.myform.a = a;
            this.myform.s = s;

            // 让表单重新校验这一项
            this.$refs.myform.validateField('pcas');
        }
    },
};
</script>

<style lang="scss" scoped>

</style>